<template>
	<div id="cartcontrol">
		<ul>
			<transition name="slid-fade">
				<li class="decrease" @click.stop.prevent="decrease()" v-show="food.count>0">-</li>
			</transition>
			<li class="count" v-show="food.count>0">{{food.count}}</li>
			<li class="add" @click.stop.prevent="add()">+</li>
		</ul>
	</div>
</template>

<script type="text/ecmascript-6">
/* eslint-disable  */
import Vue from 'vue'

export default{
	props:{
		food:{
			type:Object
		}
	},
	methods: {
		add () {
			if (!this.food.count) {
				    // 对象中某个Key是后来加上去的，响应
		        Vue.set(this.food, 'count', 1)
		      } else {
		        this.food.count ++
		    }
		},
		decrease () {
			this.food.count --
			// 如果总个数等于0 返回0
			if(this.food.count = 0){
				return 0
			}
		}
	}
}
</script>

<style>
#cartcontrol{position: absolute; right: 18px;bottom: 18px;}
#cartcontrol ul{ width: 100%; }
#cartcontrol .add{ background: #ffd161; color: #3c3113; border-radius: 50%;  width: 22px; height: 22px; line-height: 22px; text-align: center;}
#cartcontrol .decrease{background: #fff; color: #999; border-radius: 50%;  width: 22px; height: 22px; line-height: 22px; text-align: center; border:#ccc 1px solid;box-sizing: border-box;}
#cartcontrol li{ display: inline-block; }
.slid-fade-enter-active {transition: all .8s ease; opacity: 1}
.slid-fade-leave-active {transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);transform: translateX(30px) rotate(720deg);opacity: 0;}
.slid-fade-enter{transform: translateX(30px) rotate(720deg);opacity: 0;}
</style>
